<template>
  <div>
    <button @click="startRecording">开始录制</button>
    <button @click="stopRecording">停止录制</button>
    <video ref="video" controls></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mediaRecorder: null,
      recordedChunks: [],
    };
  },
  methods: {
    async startRecording() {
      const stream = await navigator.mediaDevices.getDisplayMedia();
      this.mediaRecorder = new MediaRecorder(stream, {
        mimeType: "video/webm; codecs=vp9",
      });
      this.mediaRecorder.addEventListener("dataavailable", (event) => {
        this.recordedChunks.push(event.data);
      });
      this.mediaRecorder.start();
    },
    stopRecording() {
      this.mediaRecorder.stop();
      const blob = new Blob(this.recordedChunks, { type: "video/webm" });
      const url = URL.createObjectURL(blob);
      this.$refs.video.src = url;
    },
  },
};
</script>
